<template>
  <div>
    <el-button type="success" plain @click="batch1()" >批量删除</el-button>
    <el-button type="primary" @click="add()">添加学生</el-button>
    <!-- <el-button type="danger" plain @click="add()">批量删除好友</el-button> -->
    <div >
      <div class="formTop">
        <el-form
          :model="findStudentmh"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学生学号" prop="studentId">
            <el-input v-model="findStudentmh.studentId"></el-input>
          </el-form-item>
          <el-form-item label="学生姓名" prop="studentName">
            <el-input v-model="findStudentmh.studentName"></el-input>
          </el-form-item>
          <el-form-item label="学院">
            <el-select
              v-model="findStudentmh.studentDel"
              placeholder="请选择学生所在学院"
            >
              <el-option
                label="计算机工程学院"
                value="计算机工程学院"
              ></el-option>
              <el-option label="会计学院" value="会计学院"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select
              v-model="findStudentmh.studentClass"
              placeholder="请选择学生所在班级"
            >
              <el-option label="23大数据1" value="23大数据1"></el-option>
              <el-option label="23大数据2" value="23大数据2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" plain @click="search()">开始查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-table
      ref="multipleTable"
      :data="stulist"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column fixed prop="studentId" label="学生学号" width="150">
      </el-table-column>
      <el-table-column prop="studentName" label="学生姓名" width="120">
      </el-table-column>
      <el-table-column prop="studentAge" label="学生年龄" width="120">
      </el-table-column>
      <el-table-column prop="studentTel" label="学生电话" width="120">
      </el-table-column>
      <el-table-column prop="studentDel" label="学生学院" width="120">
      </el-table-column>
      <el-table-column prop="studentSex" label="学生性别" width="120">
      </el-table-column>
      <el-table-column prop="studentDel" label="学生学院" width="120">
      </el-table-column>
      <el-table-column prop="studentClass" label="学生班级" width="120">
      </el-table-column>
      <el-table-column label="图片" width="200" align="center">
        <template slot-scope="scope">
          <img :src="$baseUrl + '/' + scope.row.studentAvator" width="30" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openModal(scope.row)"
            >更新</el-button
          >
          <el-button type="text" size="small" @click="batch(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 更新学生信息 -->
    <div>
      <el-dialog
        title="更新学生信息"
        :visible.sync="isModalOpen"
        width="30%"
        @close="closeModal"
      >
        <el-form
          :model="findStudentList"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          v-if="isModalOpen"
        >
          <el-form-item label="学生姓名" prop="studentName">
            <el-input v-model="findStudentList.studentName"></el-input>
          </el-form-item>
          <el-form-item label="学生年龄" prop="studentAge">
            <el-input v-model="findStudentList.studentAge"></el-input>
          </el-form-item>
          <el-form-item label="学生电话" prop="studentTel">
            <el-input v-model="findStudentList.studentTel"></el-input>
          </el-form-item>
          <el-form-item label="学院">
            <el-select
              v-model="findStudentList.studentDel"
              placeholder="请选择学生所在学院"
            >
              <el-option
                label="计算机工程学院"
                value="计算机工程学院"
              ></el-option>
              <el-option label="会计学院" value="会计学院"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select
              v-model="findStudentList.studentClass"
              placeholder="请选择学生所在班级"
            >
              <el-option label="23大数据1" value="23大数据1"></el-option>
              <el-option label="23大数据2" value="23大数据2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-select
              v-model="findStudentList.studentSex"
              placeholder="请选择学生性别"
            >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload1"
            >
              <!-- imageUrl也需要改变 -->
              <img
                v-if="findStudentList.studentAvator"
                :src="$baseUrl + '/' + findStudentList.studentAvator"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="certainModal">提交</el-button>
            <el-button @click="closeModal">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 添加学生信息 -->
    <div>
      <el-dialog
        title="添加学生"
        :visible.sync="isModalOpen1"
        width="30%"
        @close="closeModal1"
      >
        <el-form
          :model="addStudent"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          v-if="isModalOpen1"
        >
          <el-form-item label="学生姓名" prop="studentName">
            <el-input v-model="addStudent.studentName"></el-input>
          </el-form-item>
          <el-form-item label="学生年龄" prop="studentName">
            <el-input v-model="addStudent.studentAge"></el-input>
          </el-form-item>
          <el-form-item label="学生电话" prop="studentTel">
            <el-input v-model="addStudent.studentTel"></el-input>
          </el-form-item>
          <el-form-item label="学院">
            <el-select
              v-model="addStudent.studentDel"
              placeholder="请选择学生所在学院"
            >
              <el-option
                label="计算机工程学院"
                value="计算机工程学院"
              ></el-option>
              <el-option label="会计学院" value="会计学院"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select
              v-model="addStudent.studentClass"
              placeholder="请选择学生所在班级"
            >
              <el-option label="23大数据1" value="23大数据1"></el-option>
              <el-option label="23大数据2" value="23大数据2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别">
            <el-select
              v-model="addStudent.studentSex"
              placeholder="请选择学生性别"
            >
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <!-- imageUrl也需要改变 -->
              <img
                v-if="addStudent.studentAvator"
                :src="$baseUrl + '/' + addStudent.studentAvator"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="certainModal1">提交</el-button>
            <el-button @click="closeModal1">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getStudent,
  deleteStudent,
  findStudentById,
  updateStudent,
  insertStudent,
  deleteBatchStudent,
  findStudentmany
} from "@/api/student";
export default {
  name: "student",
  data() {
    return {
      stulist: [], //模型，学生信息列表
      isModalOpen: false, //控制弹框中显示的内容
      isModalOpen1: false,
      studentIdlist: [],
      addStudent: {
        studentName: "",
        studentAge: "",
        studentTel: "",
        studentClass: "",
        studentDel: "",
        studentSex: "",
        studentAvator: "", //提交的头像数据
      },
      findStudentList: {
        studentName: "",
        studentAge: "",
        studentTel: "",
        studentClass: "",
        studentDel: "",
        studentSex: "",
        studentAvator: "",
      },
      serchStudent: {
        studentName: "",
        studentAge: "",
        studentTel: "",
        studentClass: "",
        studentDel: "",
        studentSex: "",
        studentAvator: "",
      },
      findStudentmh:{
        studentName:'',
        studentDel:'',
        studentClass:'',
        studentId:""
      },
      baseUrl: this.$baseUrl,
      multipleSelection: [],
      imageUrl: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    handleSelectionChange(val) {
      for(let i =0;i<val.length;i++){
        this.multipleSelection[i] = val[i].studentId;
      }
      console.log(this.multipleSelection);

    },
    //关于批量删除的示例
    batch1() {
      console.log(this.multipleSelection);
      deleteBatchStudent(this.multipleSelection).then((res) => {
        alert(res.msg);
        console.log(this.multipleSelection);
        this.getData();
      });
    },
    getData() {
      getStudent().then((res) => {
        this.stulist = res.data;
        console.log(this.stulist);
      });
    },
    // 打开弹框
    openModal(row) {
      this.isModalOpen = true;
      console.log(row);
      //通过学号查找学生信息
      findStudentById(row.studentId).then((res) => {
        this.findStudentList = res.data;
        console.log(this.studentIdlist);
      });
    },

    // 关闭弹框
    closeModal() {
      this.isModalOpen = false;
    },
    closeModal1() {
      this.isModalOpen1 = false;
    },
    //确认修改
    certainModal() {
      updateStudent(this.findStudentList).then((res) => {
        this.getData();
      });
      this.isModalOpen = false;
    },
    //添加学生
    add() {
      this.isModalOpen1 = true;
    },
    //确认添加
    certainModal1() {
      insertStudent(this.addStudent).then((res) => {
        this.getData();
      });
      this.isModalOpen1 = false;
    },
    //删除单个学生
    batch(row) {
      deleteStudent(row.studentId).then(() => {
        this.getData();
        console.log(this.getData);
      });
    },
    handleAvatarSuccess(res, file) {
      //上传之后的回调函数
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.addStudent.studentAvator = res.data;
      console.log(this.addStudent.studentAvator);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess1(res, file) {
      //上传之后的回调函数
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.findStudentList.studentAvator = res.data;
      console.log(this.findStudentList.studentAvator);
    },
    beforeAvatarUpload1(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //模糊查询
    search(){
        findStudentmany(this.findStudentmh).then(res=>{
          console.log(res.data);
          this.stulist = res.data;
        })
}
  },
};
</script>

<style>
.formTop {
  width: 500px;
}
/* 头像上传的样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 弹框的背景遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹框内容 */
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 按钮样式 */
button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
.el-input {
  width: 100%;
}
</style>